
<!doctype html>
<html>
<head>
</head>
<body>
<p>The two squares below should be filled in blue.</p>
<canvas id="c" width="100" height="100" style="background-color: red;"></canvas>
<canvas id="c2" width="100" height="100" style="background-color: red;"></canvas>
<script>
    const canvas = document.getElementById('c');
    const canvas2 = document.getElementById('c2');
    const renderer = canvas.getContext('bitmaprenderer');
    const renderer2 = canvas2.getContext('2d');

    const temp_canvas = new OffscreenCanvas(640, 480);
    const gl = temp_canvas.getContext('webgl');

    gl.clearColor(0.0, 0.0, 1.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const bitmap = temp_canvas.transferToImageBitmap();

    renderer2.drawImage(bitmap, 0, 0);
    renderer.transferFromImageBitmap(bitmap);
</script>
</body>
</html>